<script lang="ts" setup>
import { formatNumber } from '@/home/utils/format';
import Tag from '@/home/components/Tag.vue';
import { gotoUrl } from '@/home/utils/other';
import { getShortDate } from '@/home/utils/date';

const props = defineProps({
  data: {
    type: Object,
    default: () => ({}),
  },
});

const atomgitUrl = import.meta.env.VITE_ATOMGIT_URL;
</script>

<template>
  <RouterLink :to="`/explore/journalism/detail/${props.data.informationId}`" custom v-slot="{ href }" v-if="props.data?.informationId">
    <div class="flex cursor-pointer justify-between gap-x-20 py-16" @click="gotoUrl(href)">
      <div class="flex-grow">
        <div class="flex-y-center flex-wrap gap-x-4 text-12 text-[#adadad] leading-20">
          <template v-if="props.data.authorInfo">
            <a :href="`${atomgitUrl}/${props.data.authorInfo.username}`" target="_blank" class="flex-y-center gap-x-4" @click.stop>
              <img
                :data-src="props.data.authorInfo.photo"
                :alt="props.data.authorInfo.nickname"
                class="lozad block size-20 border border-#e8e8e8 rounded-50% border-solid"
                v-if="props.data.authorInfo.photo"
              >
              <div class="text-#292929">{{ props.data.authorInfo.nickname }}</div>
            </a>
            <div>·</div>
          </template>
          <div>{{ getShortDate(props.data.publishTime) }}</div>
          <template v-for="(labelValue, labelIndex) in props.data.labelNameList" :key="labelValue.labelId">
            <div v-if="labelIndex === 0">|</div>
            <div v-else>·</div>
            <Tag
              :id="labelValue.labelId"
              :name="labelValue.labelName"
              :hashtag="false"
              class="hover:(text-#292929)"
              blank
            />
          </template>
        </div>

        <div class="mt-8 flex-y-center gap-x-8">
          <div class="h-22 flex-y-center rounded-4 bg-[#feefde] px-6 text-12 text-[#FC8B06] font-400 leading-16" v-if="props.data.isSelected == '1'">
            {{ $t('home.home.template3.prime') }}
          </div>
          <RouterLink :to="`/explore/journalism/detail/${props.data.informationId}`" class="block" target="_blank">
            <h3 class="line-clamp-1 break-anywhere text-16 color-#292929 font-medium leading-24">
              {{ props.data.informationTitle }}
            </h3>
          </RouterLink>
        </div>

        <p class="line-clamp-1 mt-4 break-anywhere text-14 color-#575757 leading-22">
          {{ props.data.informationMsg }}
        </p>

        <div class="mt-8 flex-y-center gap-x-24 text-#575757">
          <div class="flex-y-center gap-4 text-12">
            <span class="i-icons:eye-outlined size-16"></span>
            <span class="leading-16">{{ formatNumber(props.data.informationViews) }}</span>
          </div>
          <div class="flex-y-center gap-4 text-12">
            <span class="i-icons:good size-16"></span>
            <span class="leading-16">{{ formatNumber(props.data.informationLikeNum) }}</span>
          </div>
          <div class="flex-y-center gap-4 text-12">
            <span class="i-icons:favorite size-16"></span>
            <span class="leading-16">{{ formatNumber(props.data.informationCollectNum) }}</span>
          </div>
        </div>
      </div>

      <div class="h-74 w-126 flex-shrink-0 self-end" v-if="props.data.informationUrl">
        <img :data-src="props.data.informationUrl" :alt="props.data.informationTitle" class="lozad size-full rounded-4 bg-#f7f7f7 object-contain">
      </div>
    </div>
  </RouterLink>
</template>

<style lang="scss" scoped>
</style>
